<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>0. DEMO</title>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/to-mark/dist/to-mark.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/tui-color-picker/dist/tui-color-picker.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="./explain.css">
  </head>
  <body>
    <div class="explain">
      All evetensions are enabled
    </div>
    <div class="code-html">
    <script src="../lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
    <script src="../lib/raphael/raphael.js"></script>
    <script src="../lib/tui-chart/dist/tui-chart.js"></script>
    <script src="../dist/tui-editor-Editor-all.js"></script>
    <link rel="stylesheet" href="../dist/tui-editor.css">
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">
    <link rel="stylesheet" href="../lib/tui-color-picker/dist/tui-color-picker.css">
    <link rel="stylesheet" href="../lib/tui-chart/dist/tui-chart.css">

    <div id="editSection"></div>
    <script class="code-js">
      var content = [
        '| @cols=2:merged |',
        '| --- | --- |',
        '| table | table |',
        '```uml',
        'partition Conductor {',
        '  (*) --> "Climbs on Platform"',
        '  --> === S1 ===',
        '  --> Bows',
        '}',
        '',
        'partition Audience #LightSkyBlue {',
        '  === S1 === --> Applauds',
        '}',
        '',
        'partition Conductor {',
        '  Bows --> === S2 ===',
        '  --> WavesArmes',
        '  Applauds --> === S2 ===',
        '}',
        '',
        'partition Orchestra #CCCCEE {',
        '  WavesArmes --> Introduction',
        '  --> "Play music"',
        '}',
        '```',
        '```chart',
        ',category1,category2',
        'Jan,21,23',
        'Feb,31,17',
        '',
        'type: column',
        'title: Monthly Revenue',
        'x.title: Amount',
        'y.title: Month',
        'y.min: 1',
        'y.max: 40',
        'y.suffix: $'
      ].join('\n');

      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        useCommandShortcut: true,
        initialValue: content,
        exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table', 'taskCounter']
      });
    </script>
  </body>
</html>
